import React, { useEffect, useState } from 'react';
import styles from './css/showConsumer.less';
import { useDispatch, useSelector } from 'umi';
import { Form, Radio, Table } from 'antd';
import {
  IUserName,
  IIdentity,
  IAuthority,
  IRelation,
  IMyAuthority,
  IIdentityView,
} from '@/utils/interface';
import {
  columns1,
  columns2,
  columns3,
  columns4,
  columns5,
  columns6,
} from '@/utils/FormList';
const watchPeple: React.FC = () => {
  const [form] = Form.useForm();
  const [formLayout, setFormLayout] = useState<string>('用户数据');
  const { userList } = useSelector(
    (module) => (module as { people: { userList: IUserName[] } }).people,
  );
  const { identityList } = useSelector(
    (module) => (module as { people: { identityList: IIdentity[] } }).people,
  );
  const { authorityList } = useSelector(
    (module) => (module as { people: { authorityList: IAuthority[] } }).people,
  );
  const { relationList } = useSelector(
    (module) => (module as { people: { relationList: IRelation[] } }).people,
  );
  const { viewAuthority } = useSelector(
    (module) =>
      (module as { people: { viewAuthority: IMyAuthority[] } }).people,
  );
  const { identityViewList } = useSelector(
    (module) =>
      (module as { people: { identityViewList: IIdentityView[] } }).people,
  );
  const onFormLayoutChange = ({ layout }: { layout: string }) => {
    setFormLayout(layout);
    if (layout === '用户数据') {
      dispatch({
        type: 'people/getUser',
      });
    }
    if (layout === '身份数据') {
      dispatch({
        type: 'people/getIdentity',
      });
    }
    if (layout === 'api接口权限') {
      dispatch({
        type: 'people/getAuthority',
      });
    }
    if (layout === '身份和api接口关系') {
      dispatch({
        type: 'people/getAuthorityRelation',
      });
    }
    if (layout === '试图接口权限') {
      dispatch({
        type: 'people/getViewAuthority',
      });
    }
    if (layout === '身份和试图权限关系') {
      dispatch({
        type: 'people/getIdentityView',
      });
    }
  }
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: 'people/getUser',
    });
  }, []);
  return <div className={styles.wrap}>
    <h2>用户展示</h2>
    <Form
      onValuesChange={onFormLayoutChange}
      initialValues={{ layout: formLayout }}
      form={form}
    >
      <Form.Item name="layout" key="name">
        <Radio.Group value={formLayout}>
          <Radio.Button value="用户数据" className={styles.radio}>
            用户数据
            </Radio.Button>
          <Radio.Button value="身份数据" className={styles.radio}>
            身份数据
            </Radio.Button>
          <Radio.Button value="api接口权限" className={styles.radio}>
            api接口权限
            </Radio.Button>
          <Radio.Button value="身份和api接口关系" className={styles.radio}>
            身份和api接口关系
            </Radio.Button>
          <Radio.Button value="试图接口权限" className={styles.radio}>
            试图接口权限
            </Radio.Button>
          <Radio.Button value="身份和试图权限关系" className={styles.radio}>
            身份和试图权限关系
            </Radio.Button>
        </Radio.Group>
      </Form.Item>
    </Form>
    <h1>{formLayout}</h1>
    {formLayout === '用户数据' && (
      <Table dataSource={userList} columns={columns1} />
    )}
    {formLayout === '身份数据' && <Table dataSource={identityList} columns={columns2} />}
    {formLayout === 'api接口权限' && <Table dataSource={authorityList} columns={columns3} />}
    {formLayout === '身份和api接口关系' && <Table dataSource={relationList} columns={columns4} />}
    {formLayout === '试图接口权限' && <Table dataSource={viewAuthority} columns={columns5} />
    }
    {formLayout === '身份和试图权限关系' && (
      <Table dataSource={identityViewList} columns={columns6} />
    )}
  </div>

}
export default watchPeple;
